<template>
  <div style="position: absolute;width: 100%;height: calc(100% - 48px);">
    <div id="editormd">
      <textarea></textarea>
    </div>
  </div>
</template>

<script>
import {
		mapState,
		mapActions
  } from 'vuex'
import scriptjs from 'scriptjs'
//import editormd from '../../../static/jslib/editormd.js'
export default {
  props: ['blogContent'],
  data() {
    return {
      mdeditor:null
    };
  },
  computed: {
    ...mapState({})
  },
  watch:{
    'blogContent':function(){
      //console.log('blogContent',this.blogContent);
      this.init();
      this.resizeEditor();
    }
  },
  beforeRouteUpdate(to, from, next) {
    //testEditor.getMarkdown()
  },
  methods: {
    getContent(){
      return this.mdeditor.getMarkdown();
    },
    resizeEditor: function() {
      $("#editormd").scrollTop(0);
      $(".CodeMirror-wrap").css({'width': '50%'});
    },
    init() {
      if(this.mdeditor){
        if(!this.blogContent) this.mdeditor.clear();
        else this.mdeditor.setMarkdown(this.blogContent);
        
        return ;
      }
      var self = this;
      var uploadUrl = "http://7dtime.tunnel.echomod.cn/apix/z39base/upload";
      this.mdeditor = editormd({
        id    : "editormd",
        width : "100%",
        height: "100%",
        syncScrolling: "single",
        theme:'default',
        previewTheme: "default",
        editorTheme: "default",
        path: "/static/lib/",
        htmlDecode: "style,script,iframe|on*",
        markdown : this.blogContent,
        emoji: true,
        taskList: true,
        fragment: true, //开启碎片图
        tocm: true, // Using [TOCM]
        tex: true, // 开启科学公式TeX语言支持，默认关闭
        flowChart: true, // 开启流程图支持，默认关闭
        sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "mp4"],
        imageUploadURL: uploadUrl,
        crossDomainUpload: true,
        onlyTask: true,
        uploadCallbackURL: "eval",
        mind: true,
        onload : function() {
          //console.log('onload', this);
          //this.fullscreen();
          //this.unwatch();
          //this.watch().fullscreen();

          this.setMarkdown(this.blogContent);
          //this.width("100%");
          //this.height(480);
          //this.resize("100%", 640);
        },
        onchange : function() {
          self.resizeEditor();
        }

      });
    }
  },
  mounted() {
    scriptjs('../../../static/jslib/editormd.js', () => {
      this.init();
    });

    
  }
};
</script>

<style>
#editormd{
  margin-bottom: 0;
  height: 100%;
  /* overflow-y: auto; */
}
.CodeMirror-wrap{border-top: 0;}
</style>